<!-- eslint-disable vue/no-multiple-template-root -->
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="header-content">
    <div class="l-content">
      <el-button @click="handleMeun()" icon="el-icon-menu"  size="mini" style="margin-right:20px">
      </el-button>
      <!-- <span class="text">首页</span> -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tags" :to="{ path: item.path }" :key="item.path">{{item.label}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown @command="handleClick">
          <span class="el-dropdown-link">
           <img class="user" src="../assets/images/touxiang.jpg" alt="">
          </span>
          <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item command="cancel">退出</el-dropdown-item>
          </el-dropdown-menu>
    </el-dropdown>
    </div>
  </div>
    
  </template>
  
  <script>
  import {mapState} from 'vuex'
  import Cookie from 'js-cookie'
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
     data(){
        return{}
     },
     methods:{
      handleMeun(){
        this.$store.commit('collapseMeun')
      },
      handleClick(command){
        if(command==='cancel')
        {
        Cookie.remove('token')
        Cookie.remove('meun')

        this.$router.push('/login')
        }
      }
     },
     computed:{
      ...mapState({
        tags:state=>state.tab.tabsList
      })
     },
     mounted(){
        // console.log(this.tags,'tags')
     }
     
  
  }
  </script>

  <style lang="less" scoped>
      .header-content{
        padding:0 20px;
        background-color:#333 ;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
          color: #fff;
          font-size: 14px;
          margin-left:10px;

        }
        .r-content{
          .user{
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .l-content{
          display: flex;
          align-items: center;
          /deep/.el-breadcrumb__item{
            font-weight: normal;
            .el-breadcrumb__inner{
              &.is-link{
                color:#666
              }

            }
            &:last-child{
              .el-breadcrumb__inner{
                color: #fff;
              }
            }
          }
        }
        
      }
  </style>